import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install (app: App) {
    // 创建一个自定义指令用于图片懒加载
    app.directive('lazyImg', {
      // 监控图片是否进入可视区域
      mounted (dom, obj) {
        // console.log('dom', dom)
        // console.log('obj', obj)
        const { stop } = useIntersectionObserver(
          dom,
          ([{ isIntersecting }], options) => {
            // console.log('options', options)

            if (isIntersecting) {
              dom.src = obj.value
              // 图片加载出错时使用默认图片
              dom.onerror = function () {
                dom.src = defaultImg
              }
              stop()
            }
          },
          {
            threshold: 0
          }
        )
      }
    })
  }
}
